<template>
  <h1>App</h1>
  <!-- 
    vue2中v-model
      绑定value属性和input自定义事件
    vue3中v-model
      绑定modelValue属性和update:modelValue自定义事件
   -->
  <Child v-model="num" />

  <!-- 
    v-model:xxx="xxx"
    绑定 xxx 属性和update:xxx自定义事件

    比如：v-model:num="num"
      绑定num属性和update:num自定义事件

    移除.sync了。
   -->
  <Son v-model:num="num" />
</template>

<script lang="ts">
import Child from "./Child.vue";
import Son from "./Son.vue";

export default {
  name: "App",
  components: {
    Child,
    Son,
  },
  data() {
    return {
      num: 0,
    };
  },
};
</script>

<style scoped></style>
